<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body><div id="app">

    页码：<input type="text" v-model="pageCurrent"><br>
    每页有几条数据：<input type="text" v-model="pageSize"><br>
    username：<input type="text" v-model="pageUser.username"><br>
    gender：<input type="text" v-model="pageUser.gender"><br>
    email：<input type="text" v-model="pageUser.email"><br>
    <button @click="find">查询</button>

    <el-table :data="users" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            users: [],
            pageSize: 5,
            pageCurrent: 1,
            pageUser: {
                "username": "",
                "gender": "",
                "email": ""
            }
        },
        created() {
            this.find();
        },
        methods:{
            handleUpdate(row){
                alert(row.date);
            },
            handleDelete(row){
                alert(row.date);
            },
            find(){
                axios.post("/users/" + this.pageCurrent + "/" + this.pageSize, this.pageUser).then(res => {
                    this.users = res.data;
                })
            }
        }
    });
</script>
</body>
</html>